<template>
  <div class="wrapper"
       :class="{static:isFixed}">
    <div class="phone">
      <span class="iconfont icon">&#xe617;</span>
      <div class="title">
        <a :href="'tel:'+tel">{{phone.title}}</a>
        <!-- <p>{{phone.time}}</p> -->
      </div>
    </div>
    <div class="order"
         @click="handleSkipOrder">
      <span class="iconfont icon">&#xe6bd;</span>
      {{order}}
    </div>
  </div>
</template>

<script>
import { setPosition } from '@/assets/js/dom'
export default {
  name: 'DetailOrder',
  props: {
    order: {
      type: String,
      default: '预约'
    },
    phone: {
      type: Object,
      default () {
        return {
          title: '联系客服',
          time: '8:00-21:00'
        }
      }
    },
    tel: {
      type: String
    },
    name: {
      type: String
    }
  },
  data () {
    return {
      height: document.body.clientHeight,
      isFixed: false
    }
  },
  methods: {
    handleChangResize () {
      setPosition(this.height, this.isFixed)
    },
    handleSkipOrder () {
      this.$router.push({ path: `/detail/${this.id}/order`, query: { name: this.name } })
    }
  },
  computed: {
    id () {
      return this.$route.params.id
    }
  },
  activated () {
    window.addEventListener('resize', this.handleChangResize)
  },
  destroyed () {
    window.removeEventListener('resize', this.handleChangResize)
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  width 100%
  box-sizing border-box
  position fixed
  bottom 0
  left 0
  z-index 5
  display flex

  .phone
    display flex
    justify-content center
    background-color $bgcWh
    width 210px
    height 104px
    font-size $fzFourthly
    color $orderColor
    align-items center

    .title
      margin-left 25px

      a
        color $orderColor

  .order
    display flex
    align-items center
    justify-content center
    line-height 104px
    background-color $bgcOne
    color $whiteFzClor
    font-size $fzSecond
    width calc(100% -210px)

    .icon
      margin-right 14px

  .icon
    font-size $fzSecond

.static
  display none
</style>
